<template>
	<view class="content">
		<view class="header" style="background-image: url(../../static/mine-bg.png);">
			<view class="flex">
				<view class="header-tx">
					<image :src="imgUrl+'/static/image/home/头像.png'"></image>
				</view>
				<view class="flx4">
					<view class="">
					
						<view class="u_title">
							{{userInfo.nickName}}
						</view>
					<!-- 	<view class="flex user-box">
							<view class="user-image">
								<image :src="imgUrl+'/static/image/home/用户.png'" class="cu-avatar xl round" mode="widthFix">
								</image>
							</view>
							<view class="user-grade">
								普通用户
							</view>
						</view> -->
					</view>
				</view>
			</view>

		</view>
		<view class="flx2 tab">
			<view class="" v-for="(item,index) in tab" :key="index" @click="handleClick(item)">
				<view class="tab-url">
					<image :src="imgUrl + item.url"></image>
				</view>
				<view class="tab-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="grow ">
			<view class="grow-title">
				成长福利
			</view>
			<view class="flx2">
				<view class="grow-re ybzx" @click="handlepostMoney">
					<view class="grow-name">
						邮币中心
					</view>
					<view class="grow-count">
						{{form.haveCoin}} 邮币
					</view>
					<view class="grow-wz">
						<image :src="imgUrl+'/static/image/home/邮币.png'"></image>
					</view>
				</view>
				<view class="grow-re yhj" @click="handleMyCoupon">
					<view class="grow-name">
						我的优惠券
					</view>
					<view class="grow-count">
						{{form.haveCoupon}} 张
					</view>
					<view class="grow-wz">
						<image :src="imgUrl+'/static/image/home/优惠券.png'"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="flx2 bor">
				<view class="footer-label">
					我的报名
				</view>
				<view class="footer-jt">
					<image :src="imgUrl+'/static/image/home/更多.png'"></image>
				</view>
			</view>
			<view class="flx2 bor">
				<view class="footer-label">
					我的发布
				</view>
				<view class="footer-jt">
					<image :src="imgUrl+'/static/image/home/更多.png'"></image>
				</view>
			</view>
			<view class="flx2 bor">
				<view class="footer-label">
					我的咨询
				</view>
				<view class="footer-jt">
					<image :src="imgUrl+'/static/image/home/更多.png'"></image>
				</view>
			</view>
			<view class="flx2 bor" @click="handleAddress">
				<view class="footer-label">
					地址管理
				</view>
				<view class="footer-jt">
					<image :src="imgUrl+'/static/image/home/更多.png'"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getData,
	} from "@/utils/auth.js";
	import {
		getMineStatInfo
	} from "@/api/home.js"
	export default {

		data() {
			return {
				tab: [{
						name: "我的打卡",
						url: '/static/image/home/打卡.png',
						router: "/pages/me/mine"
					},
					{
						name: "我的活动",
						url: '/static/image/home/活动.png',
						// router:"",
					},
					{
						name: "我的奖品",
						url: '/static/image/home/奖品.png',
						// router:"",
					},
					{
						name: "我的预约",
						url: '/static/image/home/预约.png',
						router:"/pages/myPreBook/myPreBook",
					},
					{
						name: "我的包裹",
						url: '/static/image/home/订单.png',
						router:"/pages/myOrder/myOrder",
					},
				],
				userId:"",
				form:"",
				userInfo: JSON.parse(uni.getStorageSync("userInfo")),
			};
		},
		computed:{
			imgUrl(){
				return this.$imgUrl
			}
		},
		async onLoad() {
			console.log(JSON.parse(getData("userInfo")).userId, 'userId');
			this.userId=JSON.parse(getData("userInfo")).userId
			await this.getList()

		},

		methods: {
			getList(){
				getMineStatInfo({userId:this.userId}).then(res=>{
					console.log(res,'数据');
					this.form=res.data
				})
			},

			handleClick(item) {
				if(item.name=='我的打卡'){
					uni.navigateTo({
						url: '/pages/me/mine?haveClock='+this.form.haveClock
					})
				}else{

				uni.navigateTo({
					url: item.router,
				})
				}
			},
			handleMyCoupon() {
				uni.navigateTo({
					url: '/pages/MyCoupon/MyCoupon',
				})
			},
			handlepostMoney() {
				uni.navigateTo({
					// url: '/pages/postMoney/postMoney', 2025-9-12 修改成 邮币明细 兼 邮币首页
					url: '/pages/ExchangeRecord/ExchangeRecord?haveCoin='+this.form.haveCoin,

				})
			},
			handleAddress() {
				uni.navigateTo({
					url: '/pages/address/management',
				})
			},


			/**
			 * 用户信息点击
			 * @param {Number} type
			 */
			onUserInfo() {
				uni.navigateTo({
					url: '/pages/my/person'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		image {
			width: 100%;
			height: 100%;
			object-fit: fill;
		}

		.header {
			width: 100%;
			height: 144px;
			
			background-size: 100% auto;
			padding: 40px 20px 0;

			.header-tx {
				width: 52px;
				height: 52px;
				border-radius: 50%;
				margin-right: 18px;
				overflow: hidden;
			}

			.u_title {
				// font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 16px;
				color: #00ABA9;
			}

			.user-box {
				padding: 10rpx;
				background: linear-gradient(125deg, #FFF4DD 0%, #FFE6B2 100%);
				border-radius: 5px 5px 5px 0px;
				margin-top: 20rpx;

				.user-image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;


				}

				.user-grade {
					font-weight: 400;
					font-size: 24rpx;
					color: #EDA85E;
				}
			}
		}

		.tab {
			width: 100%;
			padding: 20px;
			background: white;

			.tab-url {
				width: 52px;
				height: 52px;
			}

			.tab-name {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 12px;
				color: #3D3D3D;
				margin-top: 6px;
				text-align: center;
			}
		}

		.grow {
			margin-top: 12px;
			padding: 20px 16px;
			background: white;

			.grow-title {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 16px;
				color: #1E2225;
				margin-bottom: 20px;
			}

			.grow-re {
				position: relative;
				padding: 10px 12px;
				width: 48%;

				.grow-wz {
					position: absolute;
					bottom: 0;
					right: 8px;
					width: 42px;
					height: 42px;
				}

			}

			.ybzx {
				height: 57px;
				background: linear-gradient(133deg, #FFF8F3 0%, #FFF1DF 100%);
				border-radius: 8px 8px 8px 8px;

				.grow-name {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 12px;
					color: #E7A54F;
				}

				.grow-count {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 12px;
					color: #E7A54F;
					margin-top: 6px;
				}
			}

			.yhj {
				background: linear-gradient(133deg, #FFF6F5 0%, #FEECEC 100%);
				border-radius: 8px 8px 8px 8px;

				.grow-name {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 12px;
					color: #E87F71;
				}

				.grow-count {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 12px;
					color: #E87F71;
					margin-top: 6px;
				}
			}
		}

		.footer {
			padding: 0 20px;
			background: white;
			margin: 20px 0;

			.bor {
				padding: 20px 0;
				border-bottom: 1px solid #E9E9E9;

				&:last-child {
					border-bottom: 1px solid transparent;
				}

				.footer-label {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 14px;
					color: #333333;
				}

				.footer-jt {
					width: 8px;
					height: 14px;
				}
			}
		}
	}
</style>
